<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>精灵图</title>
		<style>
      a{
        /* a是行内元素,没有宽高 */
        float: left;
        width: 403px;
        height: 600px;
        border: 1px solid red;
        background-repeat: no-repeat;
        background-image: url('./sprites.png');
      }
      .a1{
        width: 236px;
        height: 128px;
        background-position: 0px -219px;
      }
      .a2{
        width: 236px;
        height: 105px;
        background-position: 0px -349px;
      }
      /* 第一步移动背景图片
      将外边的框缩小
       */
      .a3{
        width: 236px;
        height: 100px;
        /* 第一个参数水平,第二个参数,垂直的距离 */
        background-position: 0px -460px;
      }
    </style>
	</head>
	<body>
		<a class="a1" href="#"></a>
    <a class="a2" href="#"></a>
    <a class="a3" href="#"></a>
	</body>
</html>
